import axios from 'axios'
import React,{useEffect,useState} from 'react'
import Header from '../components/Header'
import '../assets/css/category.scss'
export default function Category() {
  useEffect(()=>{
    getCategory()
  },[])
  const [category,setCategory]=useState([])
  const [secondCategory,setSecondCategory]=useState([])
  const [products,setProducts]=useState([])
  const [pid,setPid]=useState(0)
  //获取分类的方法
  const getCategory=async()=>{
    let result=await axios.get('https://v4.crmeb.net/api/category')
    console.log('result',result.data.data);
    setCategory(result.data.data)
    setSecondCategory(result.data.data[0].children)
    setPid(result.data.data[0].id)
  }

  const getSecondCategory=async(index,item)=>{
     setSecondCategory(category[index].children)
     //https://v4.crmeb.net/api/pc/get_products?page=1&limit=10&cid=53&sid=82&priceOrder=&news=0
     let result=await axios.get('https://v4.crmeb.net/api/pc/get_products',{params:{
        page:1,
        limit:10,
        cid:item.id,
        sid:0,
        news:0
     }})
     setProducts(result.data.data.list)
     setPid(item.id)
  }
  const getProductList=async(item)=>{
    console.log('item',item,'pid',pid);
    let result=await axios.get('https://v4.crmeb.net/api/pc/get_products',{params:{
        page:1,
        limit:10,
        cid:pid,
        sid:item.id,
        news:0
     }})
     setProducts(result.data.data.list)
    
  }
  return (
    <div>
        <div>
            <Header></Header>
        </div>
        <div>
           <ul className='firstCategory'>
              {
                category.map((item,index)=><li key={item.id} onClick={()=>{getSecondCategory(index,item)}}>{item.cate_name}</li>)
              }
           </ul>
        </div>
        <div className='firstCategory'>
              {
                secondCategory.map((item,index)=><li key={item.id} onClick={()=>{getProductList(item)}}>{item.cate_name}</li>)
              }
        </div>
        <div className='product-list'>
              {
                products.map((item,index)=><div className='product-item' key={item.id}>
                    <div className='product-image'>
                       <img src={item.image} alt="" />
                    </div>
                </div>)
              }
        </div>
    </div>
  )
}
